<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>22-元素的尺寸和位置</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .father {
            /* position: relative; */
            width: 300px;
            height: 300px;
            border: 10px solid red;
            margin: 100px;
            background: palegreen;
        }
        .son {
            width: 100px;
            background: pink;
        }

    </style>
</head>
<body>
    <div class="father">
        <div class="son">
            里面有文字
            里面有文字
            里面有文字
            里面有文字
            里面有文字
        </div>
    </div>

    <script>
        // offset家族
        const father = document.querySelector('.father')
        const son = document.querySelector('.son')
        // 1.元素尺寸offsetWidth 和 offsetHeight
        // console.log(father.clientWidth) // 300
        // console.log(father.offsetWidth) // 320
        // console.log(son.clientHeight) // 103
        // console.log(son.offsetHeight) //103

        // 2.元素位置 offsetTop 和 offsetLeft （类似于绝对定位）
        // 2.1 如果父亲有定位，则以父亲为准
        console.log(son.offsetLeft) // 0
        console.log(son.offsetTop) // 0

        // 父亲没有定位
        console.log(son.offsetLeft) // 110
        console.log(son.offsetTop) // 110

        console.log(father.offsetLeft) // 100
        console.log(father.offsetTop) // 100

        // 2.2 如果所有的父级都没有定位，则以浏览器文档为准



        


    </script>
</body>
</html>